<template>
    <canvas canvas-id="canvasWord" id="canvasWord" class="charts"></canvas>
</template>

<script>

    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
    var canvaWord = null;

    export default {
        props: {
            width: {
                type: Number
            },
            word_data: {
                type: Array
            },
        },
        watch: {
            width(val) {
                this.cWidth = val;
                this.getData()
            }
        },
        data() {
			return {
				cWidth:'',
				cHeight:'',
                pixelRatio:1,
			}
        },
        mounted() {
			_self = this; 
			this.cWidth = this.width;
            this.cHeight = uni.upx2px(400);
            if(this.width != 0){
                this.getData();
            }
        },
        methods: {
            getData(){
                if(this.width != 0) {
                    let Word = {
                        series: this.word_data
                    };
                    console.log(this.word_data)
                    this.showWord("canvasWord",Word);
                }else {
                    this.getData();
                }
			},
			showWord(canvasId,chartData){
				canvaWord = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'word',
					background:'#ffffff',
                    animation: true,
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						word: {
							type: 'normal'
						}
					}
				});
			},
        }
    }
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 400upx;
}
</style>